<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<div class="portlet box green">
	<div class="portlet-title">
		<div class="caption">
			<i class="fa fa-gift"></i>用户维护
		</div>
  </div>
  <div class="portlet-body form">
  	<form id="userForm" class="form-horizontal form-bordered" action="/user/save" method="post" enctype="multipart/form-data">
  		<div class="form-group">
				<label class="control-label col-md-3">用户头像:</label>
				<div class="col-md-9">
					<div class="fileinput fileinput-new" data-provides="fileinput">
						<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;">
							<c:if test="${not empty user.headImage}">
								<img src="<c:url value="${webRoot }${user.headImage}"></c:url>" alt=""/>
							</c:if>
						</div>
						<div>
							<span class="btn default btn-file">
								<span class="fileinput-new">选择图片</span>
								<span class="fileinput-exists">编辑</span>
								<input type="file" name="userPhoto">
							</span>
							<a href="javascript:;" class="btn red fileinput-exists" data-dismiss="fileinput">删除</a>
						</div>
					</div>
				</div>
			</div>
			
  		<div class="form-group">
        <label class="col-md-3 control-label">用户名:</label>
        <div class="col-md-4">
        	<div class="input-icon right">
	        	<i class="fa"></i>
	          <input type="text" class="form-control" name="username" value="${user.username}" required maxlength="50"/>
	        </div>
        </div>
      </div>
      <c:if test="${empty user}">
  		<div class="form-group">
        <label class="col-md-3 control-label">密码:</label>
        <div class="col-md-4">
        	<div class="input-icon right">
	        	<i class="fa"></i>
	          <input type="text" class="form-control" name="password" value="${user.password}" required  maxlength="50"/>
	        </div>
        </div>
      </div>
      </c:if>
  		
  		<div class="form-group">
        <label class="col-md-3 control-label">工资:</label>
        <div class="col-md-4">
        	<div class="input-icon right">
	        	<i class="fa"></i>
	          <input type="text" class="form-control" name="salary" value="${user.salary}" required maxlength="50"/>
	        </div>
        </div>
        </div>
        <div class="form-group">
        <label class="col-md-3 control-label">出生日期:</label>
        <div class="col-md-4">
        	<div class="input-icon right">
	        	<i class="fa"></i>
	        	<div class="input-group date date-picker" data-date-format="yyyy-mm-dd">
					<input type="text" class="form-control" name="birthday" readonly required
						value="<fmt:formatDate value="${user.birthday}" pattern="yyyy-MM-dd"/>"  maxlength="11"/>
					<span class="input-group-btn">
					<button class="btn default" type="button"><i class="fa fa-calendar"></i></button>
					</span>
				</div>
	        </div>
        </div>
      </div>
       <div class="form-group">
        <label class="col-md-3 control-label">性别:</label>
        <div class="col-md-4">
        	<div class="input-icon right">
	        	<i class="fa"></i>
	        	<select class="form-control select2" style="padding: 0;" name="gender">
	        			<option value="1" <c:if test="${user.gender.equals('1')}">selected</c:if>>男</option>
	        			<option value="0" <c:if test="${user.gender.equals('0')}">selected</c:if>>女</option>
	        	</select>
	        	<input type="hidden" id="roleIds" name="roleIds"/>
	        </div>
        </div>
      </div>
      
       <div class="form-group">
        <label class="col-md-3 control-label">单位:</label>
        <div class="col-md-4">
        	<div class="input-icon right">
	        	<i class="fa"></i>
	        	<select class="form-control select2" style="padding: 0;" name="station" required>
	        			<option value="">请选择</option>
	           			<option value="总公司">总公司</option>
	           			<option value="分公司" >分公司</option>
	           			<option value="厅点">厅点</option>
	           			<option value="基地运转中心">基地运转中心</option>
	           			<option value="营业所">营业所</option>
	        	</select>
	        	<input type="hidden" id="roleIds" name="roleIds"/>
	        </div>
        </div>
      </div>
      
      <div class="form-group">
        <label class="col-md-3 control-label">电话:</label>
        <div class="col-md-4">
        	<div class="input-icon right">
	        	<i class="fa"></i>
	          <input type="text" class="form-control" name="telephone" value="${user.telephone}"  maxlength="11"/>
	        </div>
        </div>
      </div>
      
      <div class="form-group">
        <label class="col-md-3 control-label">角色:</label>
        <div class="col-md-4">
        	<div class="input-icon right">
	        	<i class="fa"></i>
	        	<select class="form-control select2" style="padding: 0;" id="roleId"  multiple >
	        		<c:forEach items="${roleList}" var="role">
	        			<option value="${role.id}" <c:if test="${role.userHas}">selected</c:if>>${role.name}</option>
	        		</c:forEach>
	        	</select>
	        	<input type="hidden" id="roleIds" name="roleIds"/>
	        </div>
        </div>
      </div>
      
      <div class="form-group">
        <label class="col-md-3 control-label">备注:</label>
        <div class="col-md-4">
        	<div class="input-icon right">
	        	<i class="fa"></i>
	        	<textarea rows="5" class="form-control" name="description" maxlength="255">${user.remark}</textarea>
	        </div>
        </div>
      </div>
      
      <div class="form-actions">
        <div class="col-md-9 col-md-offset-3">
          <button type="button" class="btn btn-primary" onclick="saveUser(this)">
          	<spring:message code="btn.save"></spring:message>
          </button>
          <button type="reset" class="btn btn-default" onclick="cancel()">
          	<spring:message code="btn.return"></spring:message>
          </button>
        </div>
      </div>
      
      <input type="hidden" name="id" value="${user.id}">
  	</form>
  </div>
</div>
<script type="text/javascript" src="<c:url value="/static/custom/datepicker-util.js"></c:url>"></script>
<script type="text/javascript">
	
	$(function(){
		$('#userForm').validate({
			rules: {
				telephone: {
					telephone: true
				}
			}
		});
		
		$('#roleId').select2({
				allowClear: true
		});
		
		var userStation = "${user.station}";
		alert(userStation);
		if(userStation != "") {
			var stations = $(":select[name='station'] option");
			var station = "";
			$.each(stations, function(item, index){
				station = $(item).val();
				if( station == userStation) {
					$(item).attr("selected","selected");
					break;
				}
			})
		}
		
	});
	
	function saveUser(obj){
		
		var roleIds = '';
		$('#roleId option:selected').each(function(i){
			roleIds += $(this).val() + ',';
		});
		$('#roleIds').val(roleIds);
		
		var formData = new FormData($('#userForm')[0]);
		$.ajax({
			type: 'post',
			url: '<c:url value="/user/save"></c:url>',
			data: formData,
			async: false,  
		    cache: false,  
		    contentType: false,  
		    processData: false, 
			success: function(data){
				if(data.code == 0) {
					layer.msg(data.message, {shift: 1});
					setTimeout(function(){
						search();
						$(".panel-search").show();
					}, 1200);
					
				}else {
					layer.msg(data.message, {shift: 6});
				}
			}
		})
	} 
	
</script>